<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>Android Design - UI 概览</title>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic" />
	<link rel="stylesheet" type="text/css" href="../css/style.css" />
	<link rel="stylesheet" type="text/css" href="../css/folding.css" />
	<style type="text/css">

	</style>
	<script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="../js/jquery.common.min.js"></script>
	<script type="text/javascript" src="../js/jquery.folding.min.js"></script>
	<script type="text/javascript" src="../js/adchs.js"></script>
</head>
<body>
	<div id="pageWrapper">
		<div id="header">
			<a href="../index.html">Android Design&nbsp;<span class="headerChs">Android 设计指南非官方简体中文版</span></a>
		</div>
		<div id="navWrapper">
			<div class="divListwHeader foldingList initShow">
				<div class="trigger"><a href="../index.html">开始</a></div>
				<ul class="foldingContainer">
					<li><a href="create-vistion.html">创新的视觉效果</a></li>
					<li><a href="principles.html">设计原则</a></li>
					<li><a class="highlight" href="ui-overview.html">UI 概览</a></li>
				</ul>
			</div>
			<div class="divListwHeader foldingList">
				<div class="trigger"><a href="../style/index.html">风格</a></div>
				<ul class="foldingContainer">
					<li><a href="../style/devices-displays.html">设备和显示</a></li>
					<li><a href="../style/themes.html">主题</a></li>
					<li><a href="../style/touch-feedback.html">触摸反馈</a></li>
					<li><a href="../style/metrics-grids.html">度量单位和网格</a></li>
					<li><a href="../style/typography.html">字体</a></li>
					<li><a href="../style/color.html">颜色</a></li>
					<li><a href="../style/iconography.html">图标</a></li>
					<li><a href="../style/writing.html">写作风格</a></li>
				</ul>
			</div>
			<div class="divListwHeader foldingList">
				<div class="trigger"><a href="../patterns/index.html">模式</a></div>
				<ul class="foldingContainer">
					<li><a href="../patterns/new.html">Android 新特性</a></li>
					<li><a href="../patterns/gestures.html">手势</a></li>
					<li><a href="../patterns/app-structure.html">应用结构</a></li>
					<li><a href="../patterns/navigation.html">导航</a></li>
					<li><a href="../patterns/actionbar.html">操作栏</a></li>
					<li><a href="../patterns/multi-pane-layouts.html">多视图布局</a></li>
					<li><a href="../patterns/swipe-views.html">滑动视图</a></li>
					<li><a href="../patterns/selection.html">选择</a></li>
					<li><a href="../patterns/confirming-acknowledging.html">确认和提示</a></li>
					<li><a href="../patterns/notifications.html">通知</a></li>
					<li><a href="../patterns/widgets.html">小部件</a></li>
					<li><a href="../patterns/settings.html">设置</a></li>
					<li><a href="../patterns/help.html">帮助</a></li>
					<li><a href="../patterns/compatibility.html">兼容性</a></li>
					<li><a href="../patterns/accessibility.html">可用性</a></li>
					<li><a href="../patterns/pure-android.html">纯粹的 Android</a></li>
				</ul>
			</div>
			<div class="divListwHeader foldingList">
				<div class="trigger"><a href="../building-blocks/index.html">控件</a></div>
				<ul class="foldingContainer">
					<li><a href="../building-blocks/tabs.html">标签选项卡</a></li>
					<li><a href="../building-blocks/lists.html">列表</a></li>
					<li><a href="../building-blocks/grid-lists.html">网格列表</a></li>
					<li><a href="../building-blocks/scrolling.html">滚动容器</a></li>
					<li><a href="../building-blocks/spinners.html">下拉菜单 (Spinners)</a></li>
					<li><a href="../building-blocks/buttons.html">按钮</a></li>
					<li><a href="../building-blocks/text-fields.html">文本框</a></li>
					<li><a href="../building-blocks/seek-bars.html">滑块</a></li>
					<li><a href="../building-blocks/progress.html">进度条和活动</a></li>
					<li><a href="../building-blocks/switches.html">开关</a></li>
					<li><a href="../building-blocks/dialogs.html">对话框</a></li>
					<li><a href="../building-blocks/pickers.html">选择器</a></li>
				</ul>
			</div>
			<br class="clear" />
		</div>
		<div id="content">
			<div class="contentNav topNav">
				<div class="contentHeaderWraper">
					<h2>UI 概览&nbsp;<a class="originalLink" href="http://developer.android.com/design/get-started/ui-overview.html" target="_blank">Original Version</a></h2>
				</div>
				<div class="buttonWrapper">
					<a class="buttonPrev" href="principles.html">上一页</a><a class="buttonNext" href="../style/index.html">下一页</a>
				</div>
			</div>
			<div id="mainContent">
				<p>Android 的系统 UI 为构建您自己的应用提供了基础的框架。主要包括主屏幕 (Home Screen) 的体验、全局设备导航和通知抽屉。</p>
				<p>您的应用在保持统一和愉快的 Android 使用体验中和将起到重要的作用。本章的最后，我们将介绍在您的应用中完成这些目标的基础元素。</p>
				<p>经过了解 Android 用户界面最重要的部分，您将会有一个大体的认识。</p>
				<div class="contentHeaderWraper">
					<h2>主屏幕、所有应用和最近的应用</h2>
				</div>
				<div>
					<div class="column col4">
						<img class="nomarginLR" src="ui_overview_home_screen.png" />
						<h4>主屏幕</h4>
						<p>主屏幕 (Home) 是一个可以自定义的放置应用图标、目录和窗口小部件 (widget) 的地方。通过左右滑动切换不同的主屏幕面板。</p>
						<p>收藏栏在屏幕的底部，无论怎么切换面板，它都会一直显示对您最重要的图标和目录。</p>
						<p>通过点击收藏栏中间的“所有应用”按钮打开所有的应用和窗口小部件展示界面。</p>
					</div>
					<div class="column col4">
						<img class="nomarginLR" src="ui_overview_all_apps.png" />
						<h4>所有应用</h4>
						<p>“所有应用”界面可以浏览所有安装在您设备上的应用和窗口小部件。</p>
						<p>用户可以在“所有应用”中通过拖动图标，把应用或窗口小部件放置在主屏幕的空白区域。</p>
					</div>
					<div class="column col4 nomarginRight">
						<img class="nomarginLR" src="ui_overview_recents.png" />
						<h4>最近的应用</h4>
						<p>“最近的应用”提供了一个高效的方式去切换最近使用的应用。它能为正在运行的任务提供清晰的导航。</p>
						<p>“最近应用”按钮放置在导航栏的右边，点击后将会显示最近用户常用的应用。它们是按照时间顺序排列，将最近使用的放在最下面。</p>
						<p>点击将能切换到该应用，左右滑动则可以将其移除。</p>
					</div>
					<div class="clear"></div>
				</div>
				<div class="contentHeaderWraper">
					<h2>系统栏</h2>
				</div>
				<p>系统栏式屏幕上专门用于显示通知、设备通信状态和设备导航的区域。典型的系统栏会一直和您的应用一起显示出来。应用需要显示沉浸式内容，例如播放电影和浏览图片的时候，可以临时的隐藏系统栏，这样可以全屏浏览内容，免去不必要的干扰。</p>
				<img class="nomarginLR" src="ui_overview_system_ui.png" />
				<ul>
					<li>
						<h4>1. 状态栏</h4>
						<p>左边显示等待操作的通知，右边显示时间、电量以及信号强度等。向下滑动状态栏滑将显示通知的细节。</p>
					</li>
					<li>
						<h4>2. 导航栏</h4>
						<p>Android 4.0 新为手机而设计的导航栏，当设备没有传统的物理按键时才会显示。这里显示返回、主屏幕和最近应用按钮，当运行为 Android 2.3 或更早的系统所设计的应用时，还会显示菜单按钮。</p>
					</li>
					<li>
						<h4>3. 系统栏</h4>
						<p>在平板上可以将状态栏和导航栏结合在一起。</p>
					</li>
				</ul>
				<div class="contentHeaderWraper">
					<h2>通知抽屉</h2>
				</div>
				<p>通知抽屉显示一些简要的信息，用户在任何时候都可以从状态栏访问它们。它提供升级、提醒以及一些重要但不至于直接打断用户的信息。将状态栏滑下可以打开通知抽屉。点击消息将会打开相关的应用。<a href="../patterns/notifications.html">通知抽屉的更多信息</a></p>
				<div>
					<div class="column col4 nomarginRight">
						<img class="nomarginLR" src="ui_overview_notifications.png" />
					</div>
					<div class="column col9">
						<img class="nomarginLR" src="notifications_dismiss.png" />
						<p>大多数的通知有一个单行的标题和单行的信息。所以推荐两行的布局。如果需要，您可以增加第三行。可以考虑显示时间戳。</p>
						<p>左右滑动一条通知将会把它从通知抽屉中移除。</p>
					</div>
					<div class="clear"></div>
				</div>
				<div class="contentHeaderWraper">
					<h2>通用的应用 UI</h2>
				</div>
				<div>
					<div class="column col7 nomarginRight">
						<img class="nomarginLR" src="ui_overview_app_ui.png" />
					</div>
					<div class="column col6">
						<p>典型的 Android 应用由操作栏和应用内容区域组成。</p>
						<ul>
							<li>
								<h4>1. 主操作栏</h4>
								<p>您应用的命令和控制中心。操作栏包括您应用内的导航和最主要的操作。</p>
								<p><a href="../patterns/actionbar.html">主操作栏的更多信息</a></p>
							</li>
							<li>
								<h4>2. 视图控制按钮</h4>
								<p>使用户可以在您的应用提供的视图之间切换。视图通常由不同的数据和您应用中不同的功能组成。</p>
							</li>
							<li>
								<h4>3. 内容区域</h4>
								<p>您的应用主要内容的显示区域。</p>
							</li>
							<li>
								<h4>4. 副操作栏</h4>
								<p>副操作栏提供了放置更多操作的空间，它可以放在主操作栏下面或者屏幕的底部。这个例子中，副操作栏将一些不适合放在主操作栏的功能放置在屏幕底部。</p>
							</li>
						</ul>
					</div>
					<div class="clear"></div>
				</div>
			</div>
			<div class="contentNav bottomNav">
				<div class="buttonWrapper">
					<a class="buttonPrev" href="principles.html">上一页</a><a class="buttonNext" href="../style/index.html">下一页</a>
				</div>
			</div>
		</div>
		<div class="clear"></div>
		<div id="footer">
			<p><a href="http://adchs.sourceforge.net">Android Design 安卓设计非官方简体中文版</a>&nbsp;-&nbsp;<a href="http://www.sunjw.us/adchs" target="_blank">www.sunjw.us/adchs</a>&nbsp;-&nbsp;感谢&nbsp;<a href="http://www.topfun.us" target="_blank">topfun 同学</a>&nbsp;<a href="http://www.freemindworld.com" target="_blank">Li Fanxi</a>&nbsp;<a href="http://www.apkbus.com" target="_blank">安卓巴士</a>&nbsp;提供的&nbsp;<a href="http://www.topfun.us/adchs/">镜像1</a>&nbsp;<a href="http://www.freemindworld.com/adchs">镜像2</a>&nbsp;<a href="http://www.apkbus.com/design">镜像3</a>。</p>
			<p id="copyright">没有特别说明的话，所有内容按照 <a href="http://creativecommons.org/licenses/by/2.5/" target="_blank">Creative Commons Attribution 2.5</a> 协议授权。<br />基于 <a href="http://developer.android.com/design/" target="_blank">Android Design</a> 翻译而成，部分图片和设计样式也来自于 <a href="http://developer.android.com/design/" target="_blank">Android Design</a>。Android 是 Google 的商标。</p>
			<p>2012-2013&nbsp;-&nbsp;<a href="http://www.sunjw.us/blog" target="_blank">Sun Junwen</a>&nbsp;-&nbsp;sunjw8888 at gmail.com&nbsp;-&nbsp;<a href="http://www.sunjw.us/jsminnpp/" target="_blank">JSMinNpp</a>&nbsp;-&nbsp;<a href="http://www.twitter.com/sunjw" target="_blank" title="Follow me on Twitter"><img src="../imgs/twitter-small.png" alt="Follow me on Twitter"/></a>&nbsp;<a href="http://www.facebook.com/profile.php?id=1444809914" target="_blank" title="Follow me on Facebook"><img src="../imgs/fb-small.png" alt="Follow me on Facebook"/></a>&nbsp;<a href="http://weibo.com/nusjw" target="_blank" title="Follow me on Weibo"><img src="../imgs/weibo-small.png" alt="Follow me on Weibo"/></a>&nbsp;<a href="http://www.renren.com/sunjwvista" target="_blank" title="Follow me on Renren"><img src="../imgs/renren-small.png" alt="Follow me on Renren"/></a>&nbsp;-&nbsp;<g:plusone size="small"></g:plusone></p>
		</div>
	</div>
</body>
</html>
